
.message {
  display: flex;
  margin-bottom: 1rem;
}

.message:has(.edit-container) {
  margin-bottom: 2rem;
}

.message .media-container {
  margin-bottom: 12px;
}

.message .body, .message .actions {
  margin: 0px 32px; 
}

.message .body {
  overflow-wrap: anywhere;
}

.messages.size1 .variable-font-size, .messages.size1 .variable-font-size * {
  font-size: 13.5px;
}

.messages.size1 pre.hljs, .messages.size1 code.variable-font-size, .messages.size1 .variable-font-size code, .messages.size1 code.variable-font-size * {
  font-size: 12.5px;
}

.messages.size2 .variable-font-size, .messages.size2 .variable-font-size * {
  font-size: 14.5px;
}

.messages.size2 pre.hljs, .messages.size2 code.variable-font-size, .messages.size2 .variable-font-size code, .messages.size2 code.variable-font-size * {
  font-size: 13.5px;
}

.messages.size3 .variable-font-size, .messages.size3 .variable-font-size *{
  font-size: 16px;
}

.messages.size3 pre.hljs, .messages.size3 code.variable-font-size, .messages.size3 .variable-font-size code, .messages.size3 code.variable-font-size * {
  font-size: 14.5px;
}

.messages.size4 .variable-font-size, .messages.size4 .variable-font-size * {
  font-size: 18px;
}

.messages.size4 pre.hljs, .messages.size4 code.variable-font-size, .messages.size4 .variable-font-size code, .messages.size4 code.variable-font-size * {
  font-size: 12.5px;
}

.messages.size5 .variable-font-size, .messages.size5 .variable-font-size * {
  font-size: 20px;
}

.messages.size5 pre.hljs, messages.size5 code.variable-font-size, .messages.size5 .variable-font-size code, .messages.size5 code.variable-font-size * {
  font-size: 18.5px;
}

.message .body * {
  line-height: 1.3;
}

.message .body .variable-font-size h1 {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  font-size: 1.3em;
  border-top: 0.5px solid var(--control-list-border-color);
}

.message .body .variable-font-size h1 + h2 {
  margin-top: 0;
  padding-top: 0.75rem;
}

.message .body .variable-font-size h2 {
  margin-top: 1rem;
  padding-top: 1rem;
  font-size: 1.15em;
}

.message .body .variable-font-size h3 {
  margin-top: 1rem;
  padding-top: 1rem;
  font-size: 1.075em;
}

.message .body .variable-font-size hr {
  margin-top: 2rem;
  margin-bottom: 2rem;
  border-top: 0.5px solid var(--control-list-border-color);
}

.message .body .variable-font-size hr:has(+ h1, + h2, + h3) {
  display: none;
}

.message .body .empty {
  font-style: italic;
  color: var(--faded-text-color);
}

.message .body strong {
  font-weight: 550;
}

.message .body ul {
  margin-bottom: 2rem;
  li {
    margin: 0.75rem 0px;
  }
}

.message .body .variable-font-size table {

  border-collapse: collapse;
  margin: 2rem 0px;

  thead tr th, tbody tr td {
    padding: 0.5rem 0px;
    padding-right: 1rem;
    text-align: left;
    font-size: 0.9em;
  }
  
  thead tr th *, tbody tr td * {
    font-size: 1em;
  }

  thead {
    border-bottom: 1px solid var(--control-list-border-color);
  }

}


.message .body pre.hljs {
  line-height: 1.5;
}

.message .body .text pre {
  white-space: pre-wrap !important;
}

.message .text {
  user-select: text;
}

.message .body .text pre.hljs code.hljs {
  white-space: pre-wrap !important;
  word-break: break-all !important;
}

.message .body .text pre.hljs {
  overflow-x: auto;
  padding: 12px;
  overflow: auto;
  margin-bottom: 8px;
}

.message p:has(.copy-code) {
  margin-top: 0px !important;
}

.message .variable-font-size .copy-code {
  cursor: pointer;
  font-size: 0.95em !important;
}

.message .body .toggle-reasoning {
  cursor: pointer;
  margin: 0.5rem 0px;
  margin-left: -0.25rem;
  display: flex;
  align-items: center;
  font-size: 0.9em;
  opacity: var(--message-reasoning-opacity);
  gap: 4px;
}

.message .body .thinking-ellipsis:after {
  overflow: hidden;
  display: inline-block;
  vertical-align: bottom;
  animation: ellipsis-animation steps(1,end) 2s infinite;
  content: "\2026";
  margin-left: -3.5px
}

@keyframes ellipsis-animation {
  0%  { clip-path: inset(0 100% 0 0); }
  25% { clip-path: inset(0 66.6% 0 0); }
  50% { clip-path: inset(0 33.3% 0 0); }
  75% { clip-path: inset(0 0 0 0); }
}

.message .body .think {
  font-style: italic;
  opacity: var(--message-reasoning-opacity);
}

.message .actions {
  height: 32px;
  display: flex;
  flex-direction: row;
  align-items: center;
  visibility: hidden;
  &.visible {
    visibility: visible;
  }
}

.message .action {
  cursor: pointer;
  color: var(--message-list-actions-text-color);
  font-size: 12px;
}

.message .attachments {
  display: flex;
  flex-direction: row;
  gap: 1rem;
}

.message .attachment, .message .media {
  width: 100%;
  max-width: 200px;
  margin-top: 16px;
  border-radius: 8px;
}

.message .attachment:has(svg) {
  
  width: auto;
  max-width: fit-content;
  padding: 0.5rem 0.5rem;
  border: 1px solid var(--prompt-input-border-color);
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 14px;

  .icon {
    height: 1.125rem !important;
    width: 1.125rem !important;
  }
}

.message .attachment img {
  max-width: 200px;
}

/* this will be linked images generated by the model */
/* hopefully thumbnails so they are not too big */
.message a img {
  width: auto;
  max-width: 200px;
}

.message.assistant .attachment .icon {
  cursor: pointer;
}

.message .media-container {
  position: relative;
  width: 400px;
}

.message img {
  background-image: url(https://storage.googleapis.com/proudcity/mebanenc/uploads/2021/03/placeholder-image.png);
}

.message .status-container {
  width: calc(100% - 2rem);
  margin: 0 0 1rem 0;
  background-color: var(--tool-bg-color);
  border: 1px solid var(--tool-border-color);
  border-radius: 8px;
  font-size: 0.9em;
  font-weight: var(--font-weight-medium);
  padding: 0.5rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;

  .icon {
    margin-top: 0.125rem;
    color: var(--faded-text-color);
    flex-shrink: 0;
  }

  .status-text {
    display: inline-flex;
    align-items: center;
    min-height: 26px
  }
}

.message .message-transient {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-left: 0.25rem;
}

.message .media-container .media-actions {
  display: none;
  position: absolute;
  flex-direction: row;
  top: 24px;
  right: 12px;
  gap: 8px;
}

.message .media-container .media-actions .action {
  background-color: rgba(0, 0, 0, 0.66);
  cursor: pointer;
  font-size: 13.5px;
  padding: 8px;
  border-radius: 8px;
  color: white;
}

.message .media-container:hover .media-actions {
  display: flex;
}

.message.assistant .actions {
  position: relative;
  top: -16px;
}

.message a.copy {
  cursor: pointer;
}